<script setup lang="ts">
    import { onMounted, reactive } from 'vue';
    import { api } from "@/services/api";
    import type { CarouselItem } from '@/services/type';

    // 轮播图信息
    const carouselData = reactive<CarouselItem[]>([]);

    onMounted(async () => {
      // 获取轮播图信息列表
      const response = await api.home.getCarouselList();
      // 轮播图信息赋值
      if(response.code === 0) carouselData.push(...response.data);
    });
    

</script>
<template>
    <el-carousel :interval="4000" arrow="always" style="margin-bottom: 15px; background-color: #d3dce6;">  
        <el-carousel-item v-for="(item, index) in carouselData" :key="index">  
            <img :src="item.img" style="width: 100%; height: 300px;" />  
        </el-carousel-item>  
    </el-carousel>
</template>
<style scoped>

.el-carousel__container {
  background-color: #d3dce6;
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>